flutter学习小结1 界面控件

声明式 UI

命令式UI: 这是传统意义上的UI构建，从 Win32 到 Web 再到 Android 和 iOS，框架通常使用一种命令式的编程风格来完成 UI 编程。这可能是你最熟悉的风格 — 你手动构建一个全功能的 UI 实例，比如一个 UIView 或其他类似的，在随后 UI 发生变化时，使用方法或 Setter 修改它。

声明式UI: 为了更好的减轻开发人员负担（质疑），不需要再编写不同Ui状态下
进行切换的代码，直接描述不同状态，然后交给框架管理。

基础控件

Text 文本

Text(String data, {Key key, TextStyle style, StrutStyle strutStyle, TextAlign textAlign, TextDirection textDirection, Locale locale, bool softWrap, TextOverflow overflow, double textScaleFactor, int maxLines, String semanticsLabel, TextWidthBasis textWidthBasis, TextHeightBehavior textHeightBehavior})

类似于TextView,下面是它主要属性

属性	含义	备注
data	要显示的字符串	String
maxLines	设置最大显示行数
style	字体风格	见下表textStyle
textAlign	横向布局
textDirection	字体方向
overflow	溢出时候的显示	TextOverflow.clip 剪切文本 TextOverFlow.ellipsis 使用省略号表示溢出 TextOverflow.fade 溢出的文本透明化
sofWrap	是否需要换行
textScaleFactor	文本倍数放大

textStyle附表
|属性|含义|备注 |
|:–:|:–:|:–:|
|Color color|文本颜色|如果指定了foreground，
则此值必须为null|
|TextDecoration decoration|文本装饰器|下划线(TextDecoration.underline)
上划线(TextDecoration.overline)
删除线(Textdecoration.lineThrough)
无（TextDecoration.none）|
|Color decorationColor|装饰器颜色| |
|FontWeight fontWeight|文本字体粗细||
|Fontstyle fontStyle|字体变体|FontStyle.italic 使用斜体
FontStyle.normal 使用直立|
|TextBaseline textBaseline| 对齐水平线|TextBaseline.alphabetic：文本基线是标准的字母基线TextBaseline.ideographic：文字基线是表意字基线；
如果字符本身超出了alphabetic 基线，
那么ideograhpic基线位置在字符本身的底部|
|String fontFamily|设置字体||
|double fontSize|字体大小||
|double letterSpacing|字母之间的间隔||
|double wordspace| 单词之间间隔||
|double height|文本行与行的高度|为字体大小倍数（1-2之间）|
|Paint background|文本背景||

Row, column

这两个flex widgets 可以让你在水平 (Row) 和垂直(Column) 方向创建灵活的布局。它是基于 web 的flexbox布局模型设计的。

属性解析
|属性|含义|备注 |
|:–:|:–:|:–:|
|MainAxisAlignment|主轴对齐方式||
|MainAxisSize|主轴方向占有的空间|max和min|
|CrossAxisAlignment|交叉轴的对齐方式|
|TextBaseline|如上Text|

输入框 TextField